<template>
	<view class="content">
		<view class="group">
			<view class="list">
				<view class="list_title">姓名</view>
				<view class="list_input">
					<input class="input" type="text" placeholder="请输入姓名" v-model="realName" />
				</view>
			</view>
			<view class="list">
				<view class="list_title">手机号码</view>
				<view class="list_input">
					<input class="input" type="number" placeholder="请输入手机号码" v-model="phone" maxlength="11" />
				</view>
			</view>
			<view class="list" @click="getAddress">
				<view class="list_title">所在地区</view>
				<view class="list_addres">
					<view class="">{{address}}</view>
				</view>
			</view>
			<view class="list">
				<view class="list_input">
					<input class="input" type="text" placeholder="详细地址：如门牌号、小区、楼栋" v-model="detail" />
				</view>
			</view>
			<view class="list_bot">
				<view class="list_title">设为默认</view>
				<switch style="transform: scale(0.7);" color="#E42221" @change="switch2Change" />
			</view>
			
			
			<w-picker
				:visible.sync="regionVisible"
				mode="region"
				:value="defaultRegion"
				default-type="value"
				:hide-area="false"
				@confirm="onConfirm($event,'region')"
				@cancel="onCancel"
				ref="region" 
			></w-picker>
			
		</view>
		
		<!-- #ifdef H5 || MP-WEIXIN -->
		<!-- 添加新地址 -->
		<view class="black"></view>
		<view class="fixed_bot">
			<view class="addbot" @click="saveAddr">保存</view>
		</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import wPicker from "../../../../../components/w-picker/w-picker.vue"
	export default {
		components:{
			wPicker
		},
		data() {
			return {
				realName:'' ,// 姓名
				phone:'' ,// 手机号码
				address:'选择省市区',
				detail:'' ,// 详细地址
				latitude:'',
				longitude:'',
				isDefault:0  ,// 默认
				regionVisible:false,
				defaultRegion:["340000","340100","340111"],
				province:'',
				city:'',
				district:''
			}
		},
		methods: {
			// 设为默认
			switch2Change: function (e) {
				console.log(e)
				let value = e.detail.value;
				if (value == true) {
					this.isDefault = 1
				} else if (value == false) {
					this.isDefault = 0
				}
				
			},
			// 保存
			onNavigationBarButtonTap: function (e) {
				let that = this;
				if (that.realName == '') {
					that.tui.toast('请填写姓名');
					return
				} else if (that.phone == '') {
					that.tui.toast('请填写手机号码');
					return
				} else if (that.address == '选择省市区') {
					that.tui.toast('请选择地区');
					return
				} else if (that.detail == '') {
					that.tui.toast('请填写详细地址');
					return
				}
				that.api.userAddAddress({
					realName:that.realName,
					isDefault:that.isDefault,
					detail:that.detail,
					phone:that.phone,
					province:that.province,
					city:that.city,
					district:that.district
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data);
					setTimeout(function () {
						uni.$emit('address',{msg:'更新数据'})
						uni.navigateBack({
							delta: 1
						});
					},500)
				})
			},
			// 选择省市区
			getAddress: function () {
				this.regionVisible = true
			},
			// 选择
			onConfirm: function (e) {
				console.log(e)
				this.address = e.result;
				this.province = e.obj.province.label;
				this.city = e.obj.city.label;
				this.district = e.obj.area.label;
			},
			// 取消
			onCancel(){
				
			},
			// 保存
			saveAddr: function () {
				let that = this;
				if (that.realName == '') {
					that.tui.toast('请填写姓名');
					return
				} else if (that.phone == '') {
					that.tui.toast('请填写手机号码');
					return
				} else if (that.address == '选择省市区') {
					that.tui.toast('请选择地区');
					return
				} else if (that.detail == '') {
					that.tui.toast('请填写详细地址');
					return
				}
				that.api.userAddAddress({
					realName:that.realName,
					isDefault:that.isDefault,
					detail:that.detail,
					phone:that.phone,
					province:that.province,
					city:that.city,
					district:that.district
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data);
					setTimeout(function () {
						uni.$emit('address',{msg:'更新数据'})
						uni.navigateBack({
							delta: 1
						});
					},500)
				})
			}
			
		}
	}
</script>

<style>
	page {
		width: 100%;
		box-sizing: border-box;
		background: #F5F5F5;
		letter-spacing: 3upx;
		font-size: 32upx;
		color: #999999;
		padding: 25upx 0;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.group {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30upx;
	}
	.list {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 25upx 0;
		line-height: 40upx;
		border-bottom: 1upx solid #F4F4F4;
	}
	.list:last-child {
		border-bottom: none;
	}
	.list_title {
		width: 140upx;
		box-sizing: border-box;
	}
	.list_input {
		width: calc(100% - 140upx);
		box-sizing: border-box;
		padding-left: 15upx;
	}
	.input {
		width: 100%;
		box-sizing: border-box;
		height: 40upx;
		line-height: 40upx;
	}
	.list_switch {
		display: flex;
		justify-content: flex-end;
		text-align: right;
	}
	.list_bot {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25upx 0;
		line-height: 40upx;
	}
	.list_addres {
		width: calc(100% - 140upx);
		box-sizing: border-box;
		padding-left: 15upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list_icon {
		width: 15upx;
		height: 25upx;
		margin-left: 10upx;
	}
	.black {
		width: 100%;
		box-sizing: border-box;
		height: 150rpx;
	}
	.fixed_bot {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 10rpx 85rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
	}
	.addbot {
		width: 100%;
		box-sizing: border-box;
		background: #E42221;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10rpx;
	}

</style>
